<template>
  <div class="detail">
    <el-button type="primary" :icon="Back" circle style="position: fixed; top: 5px; left: 5px; z-index: 2;"
      @click="pushBack" />
    <AdvertisementView></AdvertisementView>
    <ProductDetail></ProductDetail>
    <UserComment></UserComment>
    <AddToCart></AddToCart>
  </div>
</template>

<script>
import AdvertisementView from '@/components/AdvertisementView.vue'
import ProductDetail from '@/components/ProductDetail.vue'
import UserComment from '@/components/UserComment.vue'
import AddToCart from '@/components/AddToCart.vue'
import { Back } from '@element-plus/icons-vue'
import { useStore } from "vuex"
import { useRouter } from 'vue-router'
export default {
  name: 'DeatailView',
  components: {
    AdvertisementView,
    ProductDetail,
    UserComment,
    AddToCart
  },
  setup() {
    let list = []
    for (let i = 1; i <= 30; i++) {
      list.push({
        url: `https://img.xjh.me/random_img.php?ctype=nature&return=302&random=${Math.random()}`,
        title: '中华郡国际旅游度假区',
        sub: '亲子游乐天堂',
        price: '¥40'
      })
    }
    const store = useStore()
    store.commit('addToCart', list)

    const router = useRouter()

    const pushBack = () => {
      router.back()
    }
    return {
      Back,
      pushBack
    }
  }
}
</script>
<style scoped>
.detail {
  background-color: #f5f5f5;
}
</style>
